<script setup>
import { reactive, ref } from 'vue'
import { add, update } from '@/api/rule.js'

//自定义事件
const emit = defineEmits(['flush'])
// 表单数据
const formData = ref({
  name: '',
  type: '',
  comment: '',
  status: '',
  effTime: '',
  workUpTime: '',
  workDownTime: '',
  clockStartTime:"",
  clockEndTime: '',
  clockPeriod: [],
  flexTime:null
})

// 表单验证
const formRules = reactive({
  name: [
    { required: true, message: '请输入考勤规则名', trigger: 'blur' },
    { min: 2, max: 20, message: '请输入2~20个字符', trigger: 'blur' }
  ]
})
// 提交验证
const formRef = ref()

const onSubmit = () => {
  formRef.value.validate(async (isSuccess) => {
    if (isSuccess) {
      //请求接口 新增接口 或 修改接口
      let r
      if (formData.value.id) {
        formData.value.clockPeriod=JSON.stringify(formData.value.clockPeriod)
        if(formData.value.type=="固定时间"){
          formData.value.flexTime=null;
        }else{
          formData.value.workUpTime= '';
          formData.value.workDownTime= '';
          formData.value.clockStartTime= '';
          formData.value.clockEndTime= '';
          formData.value.clockPeriod= JSON.stringify([]);
        }
        r = await update(formData.value)
      } else {

        formData.value.clockPeriod=JSON.stringify(formData.value.clockPeriod)
        if(formData.value.type=="固定时间"){
          formData.value.flexTime=null;
        }else{
          formData.value.workUpTime= '';
          formData.value.workDownTime= '';
          formData.value.clockStartTime= '';
          formData.value.clockEndTime= '';
          formData.value.clockPeriod= JSON.stringify([]);
        }
        r = await add(formData.value)
      }
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        state.value = false
        emit('flush')
      } else {
        ElMessage({ type: 'info', message: '操作失败' })
      }
    }
  })
}
// 对话框状态
const state = ref(false)
// 暴露
defineExpose({
  state,
  formData
})
</script>
<template>
  <el-dialog
    v-model="state"
    :title="`${formData.id ? '修改' : '添加'} 考勤规则`"
    width="600"
    :before-close="() => (state = false)"
  >
    <!-- 内容 -->
    <el-form
      v-if="state"
      size="large"
      label-width="120"
      :model="formData"
      :rules="formRules"
      ref="formRef"
    >
      <el-form-item label="考勤规则名称" prop="name">
        <el-input placeholder="请输入考勤规则名称" v-model="formData.name" />
      </el-form-item>
      <el-form-item label="考勤规则类型" prop="type">
        <el-radio-group v-model="formData.type" class="ml-4">
          <el-radio label="固定时间" size="large">固定时间</el-radio>
          <el-radio label="弹性时间" size="large">弹性时间</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上下班时间" v-if="formData.type=='固定时间'">
  <el-time-picker 
  v-model="formData.workUpTime" 
  format="HH:mm:ss" 
  value-format="YYYY-MM-DD HH:mm:ss"
  placeholder="请选择"
   />
    <el-time-picker
      v-model="formData.workDownTime"
      format="HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      placeholder="请选择"
    />
</el-form-item>
<el-form-item label="打卡时间范围" v-if="formData.type=='固定时间'">
  <el-time-picker 
  v-model="formData.clockStartTime" 
  format="HH:mm:ss" 
  value-format="YYYY-MM-DD HH:mm:ss"
  placeholder="请选择" />
    <el-time-picker
      v-model="formData.clockEndTime"
     format="HH:mm:ss"
     value-format="YYYY-MM-DD HH:mm:ss"
      placeholder="请选择"
    />
</el-form-item>
<el-form-item label="打卡周期" v-if="formData.type=='固定时间'">
  <el-checkbox-group v-model="formData.clockPeriod">
    <el-checkbox label="周一" value="周一" />
    <el-checkbox label="周二" value="周二" />
    <el-checkbox label="周三" value="周三" />
    <el-checkbox label="周四" value="周四"  />
    <el-checkbox label="周五" value="周五"  />
    <el-checkbox label="周六" value="周六"  />
    <el-checkbox label="周日" value="周日"  />
  </el-checkbox-group>

</el-form-item>
<el-form-item label="选择时间" v-if="formData.type=='弹性时间'">
  <el-input-number
    v-model="formData.flexTime"
    :min="1"
    controls-position="right"
    size="large"
  />
</el-form-item>
<el-form-item label="是否开启规则" prop="status">
        <el-radio-group v-model="formData.status" class="ml-4">
          <el-radio label="1" size="large">是</el-radio>
          <el-radio label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="规则说明" prop="username">
        <el-input type="number" placeholder="请输入活动人数" v-model="formData.maxPerson" />
      </el-form-item> -->
      <el-form-item label="生效时间">
        <el-date-picker
          type="date"
          v-model="formData.effTime"
          placeholder="请输入生效时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          :size="size"
        />
      </el-form-item>


      <el-form-item label="考勤规则说明">
        <el-input type="comment" v-model="formData.comment" placeholder="请输入规则说明" :rows="5" />
      </el-form-item>

      <el-form-item class="btns">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="default" @click="state = false">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
  </el-dialog>
</template>
